<a-modal
  id="user-modal"
  v-model="userModal.visible"
  :title="userModal.title"
  :closable="true"
  :mask-closable="false"
  :confirm-loading="userModal.confirmLoading"
  :ok-text="userModal.okText"
  cancel-text="{{ _('cancel') }}"
  @ok="handleSubmit"
  :after-close="handleClose"
  v-cloak
>
  <a-form layout="horizontal" :form="form">
    <a-form-item label="{{ _('username') }}" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-input
        v-decorator="[
          'username',
          { 
            rules: [{ 
              required: true, 
              message: '{{ _('Please input your username.') }}' 
            }],
            getValueFromEvent: event => event.target.value.replace(/\s+/g, ''),
            initialValue: userModal.user.username
          },
        ]"
        placeholder="{{ _('Input Username.') }}"
      >
        <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
    </a-form-item>
    <a-form-item label="{{ _('password') }}" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-input
        v-decorator="[
          'password',
          { 
            rules: [{ 
              required: true, 
              message: '{{ _('Please input your password.') }}' 
            }],
            getValueFromEvent: event => event.target.value.replace(/\s+/g, ''),
            initialValue: userModal.user.password
          },
        ]"
        placeholder="{{ _('Input Password.') }}"
      >
        <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
    </a-form-item>
  </a-form>
</a-modal>

<script>
  class User {
    constructor(id = null, username = "", password = "", is_admin = false, inbounds = []) {
      this.id = id;
      this.username = username;
      this.password = password;
      this.inbounds = inbounds;
    }

    static fromJson(json = {}) {
      return new User(json.id, json.username, json.password, json.inbounds);
    }

    toJson() {
      return {
        id: this.id,
        username: this.username,
        password: this.password,
        inbounds: this.inbounds,
      };
    }
  }

  const userModal = {
    title: "",
    okText: "",
    visible: false,
    confirmLoading: false,
    user: new User(),
    confirm(){},
    ok(vals) {
      userModal.confirm(vals);
    },
    show({
      title = "",
      okText = "{{ _('confirm') }}",
      user = null,
      confirm = () => {},
    }) {
      this.visible = true;
      this.title = title;
      this.okText = okText;
      if (user) this.user = user;
      this.confirm = confirm;
    },
    close() {
      userModal.closeLoading();
      userModal.visible = false;
    },
    loading() {
      userModal.confirmLoading = true;
    },
    closeLoading() {
      userModal.confirmLoading = false;
    },
    reset() {
      userModal.user.username = "";
      userModal.user.password = "";
    },
  };

  new Vue({
    delimiters: ["[[", "]]"],
    el: "#user-modal",
    data() {
      return {
        userModal: userModal,
        form: this.$form.createForm(this),
      };
    },
    methods: {
      handleSubmit() {
        this.form.validateFields((err, values) => {
          if (!err) {
            userModal.ok(values);
            this.form.resetFields();
          }
        });
      },
      handleClose() {
        this.form.resetFields();
      },
    },
  });
</script>
